<link rel="stylesheet" type="text/css" href="/site_media/css/addcard.css" />

<style>
#popupViewCard{
	display:none;
	 _position:absolute; /* hack for internet explorer 6*/
	 height:340px;
	 width:400px;
	 z-index:1;
	 background:#FFFFFF;
	 padding:10px;
	 border:2px solid #cecece;
	 font-size:13px;
}
#popupViewCard h1{
    text-align:left;
    color:#6FA5FD;
    font-size:15px;
    font-weight:700;
    border-bottom:1px dotted #D3D3D3;
    padding-bottom:2px;
    margin-bottom:20px;
}
</style>
<script>
var cardObject = new Object();
cardObject.title = "{{each_card.title}}"
cardObject.id = "{{each_card.id}}"
cardObject.start_date = "{{each_card.start_date}}"
cardObject.end_date = "{{each_card.end_date}}"
cardObject.developers = "{{each_card.developers}}"
cardObject.points = "{{each_card.points}}"
cardObject.card_color = "{{each_card.card_color}}"
cardObject.description = "{{each_card.description}}"
cardList[{{each_card.id}}] = cardObject
var oldTitle ;
var oldTitleText ;
$(document).ready(function(){
	$(".itemHeader").click(function(){
		if (document.getElementById('titeTextBox')==null)
		{
			textBox = document.createElement('input');
			textBox.type = "text";
			textBox.id = "titeTextBox"
			if (oldTitle==null || (oldTitleText != this.childNodes[0].textContent))
			{
				oldTitle = this.childNodes[0];
				oldTitleText = this.childNodes[0].innerHTML
				textbox = "<input type='text' id='titeTextBox' onClick='titleClick(this);'/>"
				textBox.appendChild(document.createTextNode(oldTitleText));
				this.childNodes[0].innerHTML = textbox;
				document.getElementById('titeTextBox').focus();
			}
			
		}

	});
	
});
function getXmlHttp(){
	var http;
	if (window.XMLHttpRequest){
	  // code for IE7+, Firefox, Chrome, Opera, Safari
	  http=new XMLHttpRequest();
	  }
	else{
	  // code for IE6, IE5
	  http=new ActiveXObject("Microsoft.XMLHTTP");
	}
	return http
}
function titleClick(targetObj){
	
	if (targetObj.value)
	{
		cardId = targetObj.parentNode.parentNode.parentNode.id;
		http = getXmlHttp();
		var params = "title="+targetObj.value;
		oldTitle.parentNode.childNodes[0].innerHTML = targetObj.value;
		oldTitleText = targetObj.value;
		http.open("POST", '/cardwall/save_title/'+cardId, true);
		http.onreadystatechange = function() {//Call a function when the state changes.
			if(http.readyState == 4 && http.status == 200) {
				alert(http.responseText);
			}
		}
		//http.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
		http.send(params);
	}
	
}
function getDescriptionViaAjax(cardId){

	http = getXmlHttp();
	http.open("GET","/cardwall/save_title/"+cardId,true);
	http.onreadystatechange = function() {//Call a function when the state changes.
		if(http.readyState == 4 && http.status == 200) {
			var xml_doc = http.responseXML.documentElement
			alert(xml_doc.getElementsByTagName('description')[0].childNodes[0].nodeValue)
			document.getElementById('loadingImg'+cardId).src = ''
			
		}
		else{
			
			document.getElementById('loadingImg'+cardId).src="/site_media/images/ajax-loader.gif"
		}
	}
	http.send(null);
}
</script>
<script src="/site_media/js/popup.js" type="text/javascript"></script>

	

<div id="{{each_card.id}}" class="groupItem">
  {% if each_card.is_open %}
    <div class="itemHeader" style="background-color: {{each_card.card_color}};"><ul>{{each_card.title}}</ul><a id={{each_card.id}} href="#" class="closeEl">[-]</a></div>
    <div class="itemContent">
  {% else %}
    <div class="itemHeader"  style="background-color: {{each_card.card_color}};"><ul>{{each_card.title}}</ul><a id={{each_card.id}} href="#" class="closeEl">[+]</a></div>
    <div class="itemContent" style="display:none">
  {% endif %}  
  <div class="card_menu">
    <a class="tbmenu viewCardPopup" href="#" id="{{each_card.id}}"><img src="/site_media/images/view_tb.png"></a>
    <a class="tbmenu" href="#" onclick="openNewWindow('/cardwall/edit_card/'+{{ each_card.id }},'Edit Card')"><img src="/site_media/images/edit_tb.png"></a>
    <a class="tbmenu" href="#" onclick="openNewWindow('/cardwall/card_comments/'+{{ each_card.id }},'Edit Card')"><img src="/site_media/images/comment_tb.png"></a>
    <a class="tbmenu" href="/cardwall/delete_card/{{ each_card.id }}" ><img src="/site_media/images/delete_tb.png"></a>
    <a class="tbmenu" href="/cardwall/gen_pdf_file/{{each_card.id}}"><img src="/site_media/images/history_tb.png"></a>	
  </div>
  <ul>
    <li>Start date: {{each_card.start_date}}</li>
    <li>End date: {{each_card.end_date}}</li>
    <li>Developers: {{each_card.developers}}</li>
    <li>Points: {{ each_card.points }}</li>
	<li><a onclick="getDescriptionViaAjax({{each_card.id}})">Description:</a>{{each_card.description|truncatewords:10}}</li>
	<img id="loadingImg{{each_card.id}}"/>
  </ul>	
  
 </div>
 
</div>



